<template>
	<view class="pages-work-order-search">
		<view class="header" id="header">
			<custom-page-search-input @filter="onFilter" v-model="queryData.keywords"
				@search="onSearch"></custom-page-search-input>
			<fui-row class="handel-wrapper fui-flex__center">
				<fui-col span="24" class="chose " v-if="!showAll">
					<fui-text t-class="button" @click="onPassThrough" text="批量通过" color="#0052D9">

					</fui-text>
				</fui-col>

				<template v-else>
					<fui-col :span="4" class="fui-flex__center">
						<fui-text t-class="button" @click="onAll" text="全选" color="#0052D9">
						</fui-text>

					</fui-col>
					<fui-col :span="16" class="select">
						<text>已选:{{checkedValue.length}}条</text>
						<fui-button width="104rpx" height="64rpx" @click="onPass">
							通过
						</fui-button>
					</fui-col>
					<fui-col :span="4" class="fui-flex__center">
						<fui-button background="#fff" border-color="#DCDCDC" width="64rpx" height="64rpx"
							@tap="onClose">
							<fui-icon name="close" color="rgba(0,0,0,0.4)"></fui-icon>
						</fui-button>
					</fui-col>
				</template>
			</fui-row>
		</view>
		<view class="body">
			<mescroll-uni :height="bodyHeight+'rpx'" @init="mescrollInit" :down="downOption" @down="downCallback"
				@up="upCallback">
				<fui-checkbox-group @change="changeCheckBox" :model-value="checkedValue">

					<template v-for="(item,index) in dataList" :key="index">
						<custom-work-order-state-wrapper-card :state="item.degree"
							v-if="item.degree == 1 || item.degree ==2" class="m-t-32">
							<custom-work-order-card @click="onCard(item,'myOrder')" :itemData="item">
								<template #headerRight>
									<fui-checkbox :value="item.orderNum" v-if="showAll"></fui-checkbox>
								</template>

							</custom-work-order-card>
						</custom-work-order-state-wrapper-card>

						<custom-work-order-card v-else class="m-t-32" @click="onCard(item,'myOrder')" :itemData="item">
							<template #headerRight>
								<fui-checkbox :value="item.orderNum" v-if="showAll"></fui-checkbox>
							</template>
							<template #footer>
								<view class="button-wrapper">
									<!-- <fui-button @click="onReject(item)" background="#F2F3FF" color="#0052D9"
										btnSize="mini" class="btn">
										驳回
									</fui-button>
									<fui-button btnSize="mini" class="btn" @click="onPassItem(item)">通过</fui-button> -->
									<template v-for="subItem in myOrderButton[item.currState]">
										<fui-button @click="onButton(item,subItem)" btnSize="mini"
											:background="subItem.background" :color="subItem.color" class="btn">

											{{subItem.label}}
										</fui-button>

									</template>

								</view>
							</template>
						</custom-work-order-card>
					</template>
				</fui-checkbox-group>


			</mescroll-uni>

		</view>
	</view>

</template>

<script>
	import {
		SubPages
	} from '../../config/router-config'

	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const {
		mescrollInit,
		downCallback,
		getMescroll,
	} = useMescroll(onPageScroll, onReachBottom)
	import {
		mapState,
		mapWritableState,
		mapGetters,
		mapActions
	} from 'pinia'
	import {
		useWorkOrderReview
	} from '../../store/modules/workOrderReview';
	import {
		WorkOrderReviewApi
	} from '../../api/workOrder';
	import _ from 'lodash'
	import {
		getElHeightRpx,
		queryParams
	} from '../../utils/util';
	import {
		useSyStemStore
	} from '../../store/modules/system';
	import {
		useHandleWorkOrder
	} from '../../store/modules/handleWorkOrder';
	export default {
		data() {
			return {
				// 显示全选
				showAll: false,
				// 选中的值
				checkedValue: [],
				mescroll: null,
				dataList: [],
				bodyHeight: 0

			}
		},
		computed: {
			...mapWritableState(useWorkOrderReview, ['queryData']),
			...mapGetters(useHandleWorkOrder, ['myOrderButton']),
			...mapState(useSyStemStore, ['viewHeight']),
		},
		onReady() {
			this.styleInit()
		},
		methods: {
			mescrollInit,
			...mapActions(useHandleWorkOrder, ['onButton', 'setMescroll', 'onCard']),
			// 初始化样式
			styleInit() {
				const the = this
				getElHeightRpx('#header', (height) => {
					this.bodyHeight = the.viewHeight - height

				})
			},
			onSearch: _.debounce(function() {
				this.mescroll.resetUpScroll()
			}, 300),
			/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				try {
					if (!this.mescroll) {
						this.mescroll = mescroll
						this.setMescroll(mescroll)
					}
					this.queryData.pageNum = mescroll.num;
					this.queryData.pageSize = mescroll.size
					const res = await WorkOrderReviewApi.getList(this.queryData)
					if (mescroll.num == 1) {
						this.dataList = []; // 第一页需手动制空列表
					}
					const curPageData = res.data.rows || []
					this.dataList = this.dataList.concat(res.data.rows)
					mescroll.endBySize(curPageData.length, res.data.total); //必传参数(当前页的数据个数, 总数据量)
				} catch (err) {
					console.error(err);
					mescroll.endErr()
				}

			},
			onFilter() {
				uni.navigateTo({
					url: SubPages.WORK_ORDER_REVIEW_FILTER.router
				})
			},
			// onCard(item) {
			// 	const params = {
			// 		orderNum: item.orderNum,
			// 		orderState: item.currState
			// 	}
			// 	uni.navigateTo({
			// 		url: `${SubPages.WORK_ORDER_DETAIL.router}${queryParams(params)}`
			// 	})
			// },
			// 批量通过
			onPassThrough() {
				this.showAll = true
			},
			// 全选
			onAll() {
				this.checkedValue = _.map(this.dataList, 'id')
			},
			onClose() {
				this.showAll = false
				this.checkedValue = []

			},
			// async onPassItem(item) {
			// 	const params = {
			// 		orderNums: item.orderNum
			// 	}
			// 	await WorkOrderReviewApi.pass(params)
			// 	this.mescroll.resetUpScroll()
			// },
			// 通过
			async onPass() {
				const params = {
					orderNums: this.checkedValue.join(',')
				}
				await WorkOrderReviewApi.pass(params, )
				this.mescroll.resetUpScroll()
				this.checkedValue = []
				this.showAll = false

			},
			// 驳回
			// onReject(item) {
			// 	const params = {
			// 		orderNum: item.orderNum,
			// 	}
			// 	uni.navigateTo({
			// 		url: `${SubPages.WORK_ORDER_REVIEW_INDEX_REJECT.router}${queryParams(params)}`
			// 	})
			// },

			// 点击复选框
			changeCheckBox: function(event) {
				this.checkedValue = event.detail.value

			},
		}
	}
</script>

<style lang="scss" scoped>
	/* pagesWorkOrderView/pagesWorkOrderView.wxss */
	.pages {
		&-work {
			&-order {
				&-search {
					background-color: #f0f2f5;
					display: flex;
					flex-direction: column;

					.header {
						background-color: #fff;
						z-index: 99;
					}

					.body {
						flex: 1;
						padding: 0 32rpx;
						// overflow: auto;
					}
				}
			}
		}
	}

	.m-t {
		margin-top: 32rpx;
	}

	.scroll-view {
		height: 100%;
	}

	.button {
		--td-button-primary-bg-color: #ffff;
	}

	.handel-wrapper {
		background: #ffffff;
		border-bottom: 2rpx solid #e7e7e7;
		padding: 24rpx 0;

		.chose {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.select {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.button-wrapper {
		margin-top: 48rpx;
		display: flex;
		justify-content: flex-end;
	}

	.btn {
		&+& {
			margin-left: 16rpx !important;
		}
	}

	.m-r-32 {
		margin-right: 32rpx;
	}

	.m-t-36 {
		margin-top: 36rpx;
	}
</style>